<template>
	<div>
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
			<List
					v-model="loading"
					:finished="finished"
					finished-text="没有更多了"
					@load="loadMore"
			>
				<Cell v-for="(item, index) in list" :key="index" :title="item.realname">
					<template slot="title">
						<span class="width100">{{ item.realname }}</span>

						<van-button size="small" type="primary" v-show="!item.is_rec" @click="startOrStopRec(item)">录音</van-button>
						<van-button size="small" icon="play-circle-o" type="info" @click="stopAndUploadRec(item)" v-show="item.is_rec">结束&上传</van-button>
						<van-button size="small" type="warning" @click="playRec(item)" v-show="item.audio_file !== ''">播放</van-button>
						<van-button size="small" type="info" @click="uploadRec(item)" v-show="item.audio_file !== ''">上传</van-button>

					</template>
				</Cell>
			</List>
		</van-pull-refresh>
	</div>
</template>

<script>
	import { API } from "@/libs/api";
	import { storage } from "@/libs/utils";
	import { Button, Toast, Circle, Progress, CellGroup, Field, Dialog, List, Cell, Icon, PullRefresh } from "vant";
	Vue.use(Progress).use(CellGroup).use(Button).use(Field).use(Icon).use(PullRefresh);
	window.tab1Vue = {
		name: "tab1",
		components: { Button, Toast, Circle, Dialog, List, Cell, Icon },
		data() {
			return {
				list: [],
				page: 1,
				isLoading: false,
				loading: false,
				finished: false,
				is_rec: false,
				recMp3: null,
				audioStreamer: null,
				currentDb: 0,
				username: '',
			};
		},
		methods: {
			toast(msg) {
				Toast({
					message: msg,
					position: 'bottom',
					closeOnClick: true,
					duration: 1000
				});
			},
			onRefresh() {
				this.page = 1;
				this.loadMore(true);
				this.updateCount();
			},
			loadMore(refresh=false) {
				const that = this;
				that.loading = true;
				API.realnames(this.username, that.page)
						.then((ret) => {
							if (ret.length > 0) {
								if (refresh) {
									that.list = [];
								}
								for (let i = 0; i < ret.length; i++) {
									that.list.push({
										'realname': ret[i],
										'audio_file': '',
										'is_rec': false
									})
								}
								that.loading = false;
								that.finished = false;
								that.isLoading = false;
								that.page++;
							}else{
								that.finished = true;
							}
						})
						.catch((err) => {
							Dialog({
								title: '获取项目列表失败',
								message: JSON.stringify(err)
							});
							that.loading = false;
							that.finished = true;
							that.isLoading = false;
						});
			},
			updateCount() {
				this.$ac.sendEvent({
					name: 'updateRealnameCount',
				});
			},
			startOrStopRec(item) {
				const that = this;
				if (item.is_rec) {
					this.recMp3.stop(function(ret, err){
						if(ret){
							that.is_rec = false;
							item.audio_file = ret.path;
						}else{
							console.error(err.message)
						}
					});
				} else {
					// 检查是否有正在录音的
					if (that.is_rec) {
						that.toast('正在录音中请先结束');
						return false;
					}
					that.toast('开始录音');
					item.audio_file = '';
					item.is_rec = true;
					this.recMp3.start(function(ret,err){
						if(ret){
							if(ret.db !== undefined && ret.db > 0){
								// 一秒钟采样10次
								// console.log(ret.db);
								// that.currentDb = ret.db;
							}
						}else{
							item.is_rec = false;
							console.error(err)
						}
					});
				}

			},
			playRec(item) {
				if (this.audio_file === '') {
					this.toast('请先录音');
					return false;
				}
				this.audioStreamer.openPlayer({
					path: item.audio_file,
				}, function(ret) {
					if (!ret.status) {
						Dialog({
							title: '播放录音失败',
							message: JSON.stringify(ret)
						})
					}

				});
			},
			stopAndUploadRec(item) {
				if (!item.is_rec) {
					this.toast('请先开始录音');
				}
				const that = this;
				this.recMp3.stop(function(ret, err){
					if(ret){
						item.is_rec = false;
						item.audio_file = ret.path;
						that.uploadRec(item);
					}else{
						Dialog({
							title: '结束录音失败',
							message: JSON.stringify(err)
						})
					}
				});
			},
			uploadRec(item) {
				API.uploadRealname(this.username, item.realname, item.audio_file)
						.then((ret) => {
							if (ret.status === 200) {
								this.toast('上传成功');
								this.updateCount();
							}
						})
						.catch((err) => {
							Dialog({
								title: '上传失败',
								message: JSON.stringify(err)
							})
						})
			}
		},
		mounted() {
			this.username = storage.get('username');
			this.updateCount();
		},
		created() {
			this.recMp3 = api.require('recMp3');
			this.audioStreamer = api.require('audioStreamer');
		}
	};

	export default window.tab1Vue;
</script>

<style scoped>
	.width100 {
		display: inline-block;
		width: 100px;
	}
</style>
